<template>
	<view class="certification-container">
		
		<!-- 顶部 -->
		<view class="header" :style="{ 'padding-top': `${statusBarHeight}px` }">
			<view class="left" @tap="goBack">
				<uni-icons type="left" size="20"></uni-icons>
			</view>
			<view class="center">
				审核资料提交记录
			</view>
			<view class="right" @tap="gotoAddReviewInfoPage">
				新增
			</view>
		</view>
		<view class="fill"></view>
		
		<!-- 认证记录列表 -->
		<view class="content" v-if="records.length > 0">
			<!--card-->
			<view v-for="(item, index) in records" :key="index" class="record-card">
				<!-- 基本信息区 -->
				<view class="section">
					<view class="head">
						<view class="title">
							基本信息
						</view>
						<view class="right">
							<view class="status-tag status-default" @tap="gotoEditReviewInfoPage(item)">
								{{ item.auditStatus === auditStatusEnum.PENDING.value ? '修改' : '查看详情' }}
							</view>
							<view class="status-tag" :class="getStatusClass(item.auditStatus)">
								{{ getReviewNameByCode(item.auditStatus) }}
							</view>
						</view>
					</view>
					<view class="info-row">
						<text class="info-label">姓名：</text>
						<text class="info-value">{{ item.surname }}{{ item.name }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">性别：</text>
						<text class="info-value">{{ getGenderNameByCode(item.sex) }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">手机号：</text>
						<text class="info-value">{{ item.phone }}</text>
					</view>
				</view>
		
				<!-- 证件信息区 -->
				<view class="section">
					<view class="head">
						<view class="title">
							证件信息
						</view>
					</view>
					<view class="info-row">
						<text class="info-label">身份证号：</text>
						<text class="info-value">{{ item.idCard }}</text>
					</view>
				</view>
		
				<!-- 驾驶信息区 -->
				<view class="section">
					<view class="head">
						<view class="title">
							驾驶信息
						</view>
					</view>
					<view class="info-row">
						<text class="info-label">驾龄：</text>
						<text class="info-value">{{ item.driverAge }}年</text>
					</view>
					<view class="info-row">
						<text class="info-label">准驾车型：</text>
						<text class="info-value">{{ getDriverCarNameByCode(item.driverCarType) }}</text>
					</view>
				</view>
				
				<!-- 驾驶信息区 -->
				<view class="section" v-if="item.auditReason">
					<view class="head">
						<view class="title">
							驳回原因
						</view>
					</view>
					<view class="info-row">
						<text class="info-value">{{ item.auditReason }}</text>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 空状态提示 -->
		<view v-else class="empty-tip">
			<image src="/static/imgs/empty.png" class="empty-img" />
			<text class="empty-text">暂无认证记录</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getReviewNameByCode, getDriverCarNameByCode, getGenderNameByCode, auditStatusEnum } from '@/utils/enums'
import { getReviewsByDriverId } from '@/api/user.js'
import { useUserStore } from '@/stores/userStore.js'

const driver = useUserStore()
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

// 模拟认证记录数据
const records = ref([])

// 获取状态样式类
const classMap = {
	0: 'status-pending',
	1: 'status-pass',
	2: 'status-reject'
}
function getStatusClass (status) {
	return classMap[status] || ''
}

function goBack () {
	uni.navigateBack()
}

// 去新增
function gotoAddReviewInfoPage () {
	uni.navigateTo({
		url: `/pages/mine/edit-info?readOnly=${false}`
	})
}
// 去编辑
function gotoEditReviewInfoPage (review) {
	if (review.auditStatus === auditStatusEnum.PENDING.value) {
		// 去修改
		uni.navigateTo({
			url: `/pages/mine/edit-info?id=${review.id}&readOnly=${false}`
		})
	} else {
		// 去查看
		uni.navigateTo({
			url: `/pages/mine/edit-info?id=${review.id}&readOnly=${true}`
		})
	}
	
}

// 查询列表
function getReviews () {
	getReviewsByDriverId(driver.getCurrentDriver().id).then(res => {
		records.value = res.data
	})
}

onMounted(() => {
	// 查询列表
	getReviews()
	// 监听审核材料变更
	uni.$on('reviews-change', getReviews)
})

onUnmounted(() => {
	uni.$off('reviews-change')
})
</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
.certification-container {
	padding: 0 25rpx;
	min-height: 100vh;
	background-color: #f8f8f8;
	
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f8f8f8;
		z-index: 100;
		.left {
			width: 150rpx;
			display: flex;
			align-items: center;
		}
		.right{
			width: 150rpx;
			display: flex;
			justify-content: flex-end;
			color: #1d6cff;
		}
		.center {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.fill {
		height: 150rpx;
	}
	
	.content {
		padding: 20rpx 0;
		height: 100%;
		.record-card {
			position: relative;
			margin-bottom: 24rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.section {
				margin-bottom: 24rpx;
			
				&:last-child {
					margin-bottom: 0;
				}
			
				.head {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					padding-bottom: 12rpx;
					border-bottom: 1rpx solid #eee;
					
					.title {
						font-size: 30rpx;
						font-weight: bold;
						color: #333;
					}
					
					.right {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.status-tag {
							padding: 6rpx 16rpx;
							border-radius: 20rpx;
							font-size: 24rpx;
							margin-left: 12rpx;
							
							&:first {
								margin-left: 0;
							}
							
							&.status-default {
								background: #f3f3f3;
								color: #777;
							}
							&.status-pass {
								background: #e8f5e9;
								color: #2e7d32;
							}
							&.status-pending {
								background: #fff8e1;
								color: #ff8f00;
							}
							&.status-reject {
								background: #ffebee;
								color: #c62828;
							}
						}
					}
					
				}
				
				.info-row {
					display: flex;
					margin-bottom: 16rpx;
					font-size: 28rpx;
				
					&:last-child {
						margin-bottom: 0;
					}
					
					.info-label {
						color: #666;
						width: 140rpx;
					}
					
					.info-value {
						color: #333;
						flex: 1;
					}
					
				}
				
			}
			
		}
		
	}
	
	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 70vh;
	
		.empty-img {
			width: 500rpx;
			height: 500rpx;
			margin-bottom: 32rpx;
			opacity: 0.6;
		}
	
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
}

</style>